<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el 与 data 的两种写法</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
    <!-- 
        el有两种写法:
            1、new Vue时候配置el属性
            2、先创建Vue实例，随后再通过VM.$mount('#root')指定el的值
        data有两种写法：
            1.对象式：
            2.函数式：以后学到组件是，data必须使用函数式，否则会报错
        一个重要的原则：
            由于Vue的管理函数，一定不要写箭头函数，一旦写了，this就不再是Vue实例对象了

     -->
    <div id="root">我是 {{name}}</div>
</body>
<script>
     Vue.config.productionTip=false;
    const v=new Vue({
        // el:'#root',//el的第一种
      //data的第一种写法：对象式
      /*   data:{
            name:'luoyu'
        }  */
        // data的第二种写法：函数式
        data:function(){
            console.log('@@@',this);//此处this是Vue实例对象
            return {
                name:'luoyu'
            }
        }
    })
    v.$mount("#root");//el的第二种
    // setTimeout(()=>{v.$mount("#root")},1000);这种更加灵活些
</script>
</html>